<template>
	<view>
		<hx-navbar ref="hxnb" :config="config">
			<block slot="max">
				<view class="nav_wrap flex">
					<view class="back_wrap flex" @click="back">
						<u-icon name="arrow-left" color="#333" size="36"></u-icon>
					</view>
					<view class="page_title font_18_333">粉丝</view>
				</view>
			</block>
		</hx-navbar>
		<view class="main-div">
			<image class="main-bg" src="../../static/img/mine/fans-bg.png" mode=""></image>
			<view class="zhanwei" :style="{'height':statusBarHeight+'rpx'}"></view>
			<view class="m-d">
				<view class="font_12_333">
					粉丝数(人)
				</view>
				<view class="num font_weight">
					{{list.length}}
				</view>
			</view>
		</view>
		<view class="fans-div">
			<view class="" v-if="list.length==0">
				<image class="fans-kong" src="../../static/img/mine/fans-kong.png" mode=""></image>
			</view>
			<view class="" v-else>
				<view class="font_16_333 font_weight u-p-b-32">
					粉丝列表
				</view>
				<view class="fans-item flex" v-for="(item,index) in list" :key="index">
					<image class="headimg" :src="image" mode="aspectFill"></image>
					<view class="u-m-l-20">
						<view class="flex">
							<view class="">
								{{item.mobile}}
							</view>
							<view class="u-m-l-24 bq bq1" v-if="item.level==0">
								黄金
							</view>
							<view class="u-m-l-24 bq bq2" v-if="item.level==1">
								白金
							</view>
							<view class="u-m-l-24 bq bq3" v-if="item.level==2">
								荣耀
							</view>
							<view class="u-m-l-24 bq bq4" v-if="item.level==3">
								王者
							</view>
						</view>
						<view class="u-m-t-24 font_10_999">
							{{item.created_at}}
						</view>
					</view>
				</view>
			</view>
			
		</view>
		<view class="zhanwei2"></view>
		<view class="btn-bo">
			<button class="btn_login_btn" @click="yaoqing">邀请好友</button>
		</view>
	</view>
</template>

<script>
	var statusBarHeight = (uni.getSystemInfoSync().statusBarHeight * 2);
	export default {
		data() {
			return {
				statusBarHeight:statusBarHeight,
				config: {
					maxSlot: true,
					back: false,
					barPlaceholder: false,
					backgroundColor: [0, '#FCEEDC'],
					slideBackgroundColor: [1, '#FFFFFF']
				},
				
				list:[]
			}
		},
		onPageScroll(e) {
			// 重点，用到滑动切换必须加上
			this.$refs.hxnb.pageScroll(e);
		},
		onLoad() {
			this.getXiaJiList()
		},
		methods: {
			getXiaJiList(){
				this.$api({
					url: '/getXiaJiList',
					method: 'get',
					data: {
						token:uni.getStorageSync("token")
					},
				}).then(res => {
					if (res.code == 1) {
						this.list = res.data.list
						
					}
				})
			},
			
			
			
			yaoqing(){
				uni.navigateTo({
					url:"/pages/mine/yaoqing"
				})
			},
			back(){
				uni.navigateBack()
			}
		}
	}
</script>

<style scoped lang="scss">
	.fans-kong{
		width: 308rpx;
		height: 250rpx;
		margin: 100rpx auto;
	}
	.zhanwei2 {
		width: 750rpx;
		height: 142rpx;
	}
	.btn-bo{
		width: 750rpx;
		height: 120rpx;
		background: #FFFFFF;
		box-shadow: 0rpx -2rpx 8rpx 2rpx rgba(0,0,0,0.14);
		padding-top: 14rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 9;
		
		.btn_login_btn{
			width: 686rpx;
			height: 90rpx;
			background: linear-gradient( 177deg, #FFF7EA 0%, #ECA561 100%);
			border-radius: 46rpx 46rpx 46rpx 46rpx;
			// margin-top: 116rpx;
			font-size: 36rpx;
			color: #713005;
			line-height: 90rpx;
			margin-left: 32rpx;
			text-align: center;
			font-weight: bold;
		}
	}
	.fans-div{
		width: 750rpx;
		margin-top: -30rpx;
		background: #F5F5F6;
		border-radius: 32rpx 32rpx 32rpx 32rpx;
		padding: 32rpx;
		position: relative;
		z-index: 8;
		.fans-item{
			width: 686rpx;
			// height: 146rpx;
			background: #FFFFFF;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			padding: 32rpx;
			margin-bottom: 20rpx;
			.headimg{
				width: 88rpx;
				height: 88rpx;
				border-radius: 50%;
			}
			.bq{
				width: 80rpx;
				height: 36rpx;
				border-radius: 40rpx 40rpx 40rpx 40rpx;
				font-weight: bold;
				font-size: 20rpx;
				color: #34302D;
				line-height: 36rpx;
				text-align: center;
			}
			.bq1{
				background: linear-gradient( 180deg, #FFEDBE 0%, #FCE4A5 100%);
			}
			.bq2{
				background: linear-gradient( 180deg, #FCEFDF 0%, #F5DBC4 100%);
			}
			.bq3{
				background: linear-gradient( 180deg, #C4E9FF 0%, #DBF2FF 13%, #E4E9FF 43%, #ECE4FF 83%, #BEE7FF 100%);
			}
			.bq4{
				background: linear-gradient( 180deg, #555555 0%, #333333 100%);
				color: #F4E1C3;
			}
		}
	}
	.nav_wrap {
		width: 100%;
		position: relative;

		.back_wrap {
			position: absolute;
			left: 24rpx;

			.diqu {
				font-weight: 600;
				font-size: 32rpx;
				color: #FFFFFF;
				margin: 0 12rpx;
			}

			.dq-icon {
				width: 28rpx;
				height: 34rpx;
			}
		}

		.page_title {
			width: 100vw;
			text-align: center;
			font-weight: bold;
		}
	}

	.main-div {
		position: relative;
		width: 100%;

		.main-bg {
			width: 100%;
			height: 424rpx;
			position: absolute;
			top: 0;
			z-index: 0;
		}

		.zhanwei {
			width: 100%;
		}

		.m-d {
			width: 100%;
			height: 424rpx;
			position: relative;
			padding-top: 128rpx;
			z-index: 2;
			padding-left: 48rpx;

			.num {
				font-size: 56rpx;
				margin-top: 12rpx;
			}
		}
	}
</style>